<template>
  <div>
    <!--查询参数及按钮部分-->
    <div class="filter-container">
      <el-dialog
        v-dialogDrag
        :close-on-click-modal="false"
        :title="dialogStatus"
        :visible.sync="dialogEditFormVisible"
        style="padding:0px"
        width="50%"
      >
        <el-form
          ref="dataForm"
          class="dialog-Backgroundcolor"
          :model="listQuery"
          label-position="right"
        >
          <el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="单位名称：">
                  <el-input
                    v-model="listQuery.agencyName"
                    class="filter-item Borderwidth"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收款人账号：">
                  <el-input
                    v-model="listQuery.payeeAcctNo"
                    class="filter-item Borderwidth"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="申请金额：">
                  <el-input
                    v-model="listQuery.payAppAmt"
                    class="filter-item Borderwidth"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收款人全称：">
                  <el-input
                    v-model="listQuery.payeeAcctName"
                    class="filter-item Borderwidth"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="收款人开户行：">
                  <el-input
                    v-model="listQuery.payeeAcctBankName"
                    class="filter-item Borderwidth"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-button
              type="primary"
              style="float:right;"
              @click="handleQuery"
            >
              查询
            </el-button>

          </el-row>

        </el-form>
      </el-dialog>
    </div>
    <el-table
      ref="singalTable"
      v-loading="listLoading"
      :data="list"
      fit
      :height="tableHeight"
      style="width:100%;"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <template slot="empty">
        <tableEmpty />
      </template>
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="50"
      />
       <el-table-column label="单位名称" width="200" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.agencyName }}</span>
            </template>
          </el-table-column>
     <el-table-column label="支付单号" width="180" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.payId }}</span>
            </template>
          </el-table-column>
      <el-table-column label="申请编号" width="100" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.payAppNo }}</span>
            </template>
          </el-table-column>
      <el-table-column label="指标ID" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.bgtId }}</span>
            </template>
          </el-table-column>
      <el-table-column label="申请金额" width="100" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.payAppAmt }}</span>
            </template>
          </el-table-column>
      <el-table-column label="资金性质" width="160" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.fundType }}</span>
            </template>
          </el-table-column>
      <el-table-column label="收款人全称" width="150" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.payeeAcctName }}</span>
            </template>
          </el-table-column>
           <el-table-column label="收款人账号" width="160" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.payeeAcctNo }}</span>
            </template>
          </el-table-column>
            <el-table-column label="收款人开户行" width="130" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.payeeAcctBankName }}</span>
            </template>
          </el-table-column>
            <el-table-column label="支付方式" width="130" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.payType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="项目分类" width="100" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.proCat }}</span>
            </template>
          </el-table-column>
          <el-table-column label="政府经济分类" width="165" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.govBgtEco }}</span>
            </template>
          </el-table-column>
            <el-table-column label="部门经济分类" width="150" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.depBgtEco }}</span>
            </template>
          </el-table-column>
           <el-table-column label="预算科目" width="190" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.pro }}</span>
            </template>
          </el-table-column>
           <el-table-column label="资金用途" width="120" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.useName }}</span>
            </template>
          </el-table-column>
           <el-table-column v-if="tabPane === 'waitUpdate'" label="退回时间" width="102" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.returnTime }}</span>
            </template>
          </el-table-column>
           <el-table-column v-if="tabPane === 'waitUpdate'" label="退回原因" width="160" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.returnReason }}</span>
            </template>
          </el-table-column>
            <el-table-column label="是否重新推送" width="120" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.isPushAgain | verifyFilter(that) }}</span>
              
            </template>
          </el-table-column>
           <el-table-column label="现收款人全称" width="150" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.newPayeeAcctName }}</span>
            </template>
          </el-table-column>
           <el-table-column label="现收款人账号" width="160" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.newPayeeAcctNo }}</span>
            </template>
          </el-table-column>
          <el-table-column  v-if="tabPane === 'submit'"  label="重新推送时间"  width="102" align="center" prop="label">
            <template slot-scope="{row}">
              <span style="float: ">{{ row.revisitReasonTime }}</span>
            </template>
          </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog
      v-dialogDrag
      title="修改退票"
      :visible.sync="bankFormVisible"
      width="90%"
      max-height="500px"
    >
      <el-form
        ref="bankForm"
        :rules="bankFormRules"
        :model="formData"
        label-position="right"
        label-width="120px"
        size="small"
      >
        <el-row>
           <el-col :span="6">
            <el-form-item
              label="单位名称"
              prop="agencyName"
            >
              <el-input
                v-model="formData.agencyName"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="收款人全称："
              prop="payeeAcctName"
            >
              <el-input
                v-model="formData.payeeAcctName"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="支付单号："
              prop="payId"
            >
              <el-input
                v-model="formData.payId"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="现收款人全称"
              prop="newPayeeAcctName"
            >
              <el-input maxlength="100"
                v-model="formData.newPayeeAcctName"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="申请金额"
              prop="payAppAmt"
            >
              <el-input
                v-model="formData.payAppAmt"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="收款人账号："
              prop="payeeAcctNo"
            >
              <el-input
                v-model="formData.payeeAcctNo"
                 disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="收款人开户行"
              prop="newSalaCardNo"
            >
              <el-input
                v-model="formData.payeeAcctBankName"
                maxlength="60"
              />
            </el-form-item>
          </el-col>

            <el-col :span="6">
            <el-form-item
              label="现收款人账号"
              prop="newPayeeAcctName"
            >
              <el-input maxlength="100"
                v-model="formData.newPayeeAcctNo"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="padding-top:5%">
          <el-col
            :span="24"
            style="text-align:center"
          >
            <el-button
              round
              type="primary"
              :loading="saveNewBankLoading"
              @click="saveNewBank"
            >
              保存
            </el-button>
            <el-button
              round
              @click="bankFormVisible = false"
            >
              取消
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import file from '@/views/personInfoMaintenance/children/file'
import { getSex, getAgencyBank,  getConfigCtrlByTypeMof } from '@/api/baseInfo'
import { queryPaymentTicketPage ,UpdatePaymentTicket ,modifyIsPushAgain} from'@/api/salaryConfigManage/paymentTicket'
import Pagination from '@/components/Pagination'
import tableEmpty from '@/components/table/empty'

export default {
  name: 'UnitEditCardNumber',
  components: { Pagination, tableEmpty, file },
  filters: {
    verifyFilter(value, that) {
      if (value === 0) {
        return '否'
      }
      if (value === 1) {
        return '是'
      }
      return value
    },
    bankFilter(type, that) {
      const agencyBankLists = that.agencyBankLists
      for (const item in agencyBankLists) {
        if (agencyBankLists[item].code === type) {
          return agencyBankLists[item].name
        }
      }
    },
    sexFilter(type, that) {
      const sexLists = that.sexLists
      for (const item in sexLists) {
        if (sexLists[item].code === type) {
          return sexLists[item].name
        }
      }
    },
    isUpdateFilter(type, that) {
      if (type === 0) {
        return '未修改'
      } else if (type === 1) {
        return '已修改'
      }
    },
    
  },
  props: ['tabPane', 'treeData'],
  data() {
    return {
      tableHeight: null,
      dialogEditFormVisible: false,
      saveNewBankLoading: false,
      dialogStatus: '',
      that: this,
      listLoading: false,
      list: [],
      total: 0,
       listQuery: {
        page: 1,
        limit: 200,
        flag: 'waitUpdate',
        agencyId: '',
        agencyCode:'',
        agencyName: '',
        payeeAcctNo: '',
        payAppAmt: '',
        payeeAcctName: '',
        payeeAcctBankName: ''
      },
      formData: {
        id: '',
        agencyId: '',
        agencyName: '',
        payId: '',
        payAppNo: '',
        bgtId: '',
        payAppAmt: '',
        fundType: '',
        payeeAcctName: '',
        payeeAcctNo: '',
        payType: '',
        proCat: '',
        govBgtEco: '',
        depBgtEco: '',
        pro: '',
        useName: '',
        returnTime: '',
        returnReason: '',
        isPushAgain: '',
        newPayeeAcctName: '',
        newPayeeAcctNo: ''
      },
      sexLists: [],
      agencyBankLists: [],
      bankFormVisible: false,
      bankFormRules: {
        },
      revokePersonLists: []
    }
  },
  watch: {
    list(val) {
      this.doLayout()
    },
    treeData(val) {
      if (val && val.isleaf === '1') {
        this.handleTree(val)
      }
    }
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  created() {
    this.listQuery.flag = this.tabPane
    this.initBaseInfo()
    if (this.treeData && this.treeData.isleaf === '1') {
      //  this.listQuery.agencyId = this.treeData.id
      //  this.formData.agencyId = this.treeData.id
       this.listQuery.page = 1
      this.getList()
    }
  },
  methods: {
    doLayout() {
      this.$nextTick(() => {
        this.$refs.singalTable.doLayout()
      })
    },
    getTbHeight() {
      this.tableHeight = window.innerHeight - 223
    },
    //获取点击的值 赋值给listQuery.afencyid
    treeDatas(data){
     if (data && data.isleaf === '1') {
        this.listQuery.agencyId=data.id
       this.getList()
       }
       //判断id 是否是父 如果是父 查全部
     if(data.id=='0'){
     this.listQuery.agencyId=''
     this.getList()
     }
    },
    getList() {
      this.listLoading = true
      queryPaymentTicketPage(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    restTemplate() {
      this.formData = {
        id:this.$refs.singalTable.selection[0].id,
        isPushAgain: '1',
        agencyId: this.$refs.singalTable.selection[0].agencyId
      }
    },
    updateBank() {
      const selection = this.$refs.singalTable.selection
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择一条数据',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.formData = Object.assign({}, this.formData, selection[0])
      this.bankFormVisible = true
     },
     async saveNewBank() {
      this.$refs['bankForm'].validate(valid => {
        if (valid) {
          if (this.formData.payeeAcctName === this.formData.newPayeeAcctName && this.formData.payeeAcctNo === this.formData.newPayeeAcctNo){
             this.$message({
              showClose: true,
              message: '未修改任何信息！请确认',
              type: 'warning',
              duration: 4000
            })
            return
          }
          if (this.formData.newPayeeAcctName === null ||  this.formData.newPayeeAcctNo === null||this.formData.newPayeeAcctName === '' ||  this.formData.newPayeeAcctNo === ''){
             this.$message({
              showClose: true,
              message: '现收款户名称与账号不允许为空！',
              type: 'warning',
              duration: 4000
            })
            return
          }
          this.saveNewBankLoading = true
          const tempData = Object.assign({}, this.formData)
          UpdatePaymentTicket(tempData).then(response => {
            this.bankFormVisible = false
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success',
              duration: 4000
            })
             //this.$refs.fileRef.save() // 第三个页签保存
            this.saveNewBankLoading = false
            this.handleQuery()
          }).catch(() => {
          this.saveNewBankLoading = false
        })
        }
      })
    },
    // revokeUpdate() {
    //   this.revokePersonLists = []
    //   const selection = this.$refs.singalTable.selection
    //   if (selection.length === 0) {
    //     this.$message({
    //       showClose: true,
    //       message: '请选择要撤销修改的人员',
    //       type: 'warning',
    //       duration: 4000
    //     })
    //     this.$emit('isRevokeUpdateCallBack')
    //     return
    //   }
    //   selection.forEach(item => {
    //     this.revokePersonLists.push(item)
    //   })
    
    //   revokeUpdate(this.revokePersonLists).then(response => {
    //     this.$message({
    //       showClose: true,
    //       message: '撤销修改成功',
    //       type: 'success',
    //       duration: 4000
    //     })
    //     this.$emit('isRevokeUpdateCallBack')
    //     this.handleQuery()
    //   })
    //     .catch(() => {
    //       this.$emit('isRevokeUpdateCallBack')
    //     })
    // },
  
    // revokeVerify() {
    //   this.restTemplate()
    //   revokeVerify(this.formData).then(response => {
    //     if (response.data === '500') {
    //       this.$message({
    //         showClose: true,
    //         message: '异常卡号已送审财政，不允许撤销操作',
    //         type: 'warning',
    //         duration: 4000
    //       })
    //       this.$emit('isRevokeVerifyCallBack')
    //     } else if (response.data === '501') {
    //       this.$message({
    //         showClose: true,
    //         message: '单位未审核通过，不允许撤销操作',
    //         type: 'warning',
    //         duration: 4000
    //       })
    //       this.$emit('isRevokeVerifyCallBack')
    //     } else if (response.data === '200') {
    //       this.$message({
    //         showClose: true,
    //         message: '撤销审核成功',
    //         type: 'success',
    //         duration: 4000
    //       })
    //       this.$emit('isRevokeVerifyCallBack')
    //     }
    //     this.handleQuery()
    //   })
    //     .catch(() => {
    //       this.$emit('isRevokeVerifyCallBack')
    //     })
    // },
    sendVerifyFinance() {
       const selection = this.$refs.singalTable.selection
       if (selection.length === 0) {
        // 将请最少选择一条数据返回
        this.$message({
          showClose: true,
          message: '请至少选择一个单位',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.$confirm('是否重新推送?', '提示', {
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         this.handleSave()
      })
        .catch(() => {
           this.$message({
            type: 'info',
            message: '已取消同步'
          });
        })
    },
      handleSave(){
      const selection = this.$refs.singalTable.selection
       // 获取当前 表格信息中的 序号
      this.saveLoading = true
      // 创建一个集合数组
      const postIds = []
      // 将当前的存入 map 循环存入 返回给后台
       selection.forEach(item => {
        item.isPushAgain = '1'
      })
    //  接口 插入或者保存
      modifyIsPushAgain(selection).then(() => {
        this.$message({
          showClose: true,
          message: '推送成功',
          type: 'success',
          duration: 4000
        })
        // 保存后调用刷新方法
         this.handleQuery()
      }).catch(() => {
        this.saveLoading = false
      })
    },

    // revokeVerifyFinance() {
    //   this.restTemplate()
    //   this.$confirm('确定撤销送审吗?', '提示', {
    //     closeOnClickModal: false,
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       revokeVerifyFinance(this.formData).then(response => {
    //         if (response.data === '500') {
    //           this.$message({
    //             showClose: true,
    //             message: '财政已确认，不允许撤销财政送审',
    //             type: 'warning',
    //             duration: 4000
    //           })
    //           this.$emit('isRevokeVerifyFinanceCallBack')
    //         } else if (response.data === '501') {
    //           this.$message({
    //             showClose: true,
    //             message: '单位未审核通过，不允许撤销财政送审',
    //             type: 'warning',
    //             duration: 4000
    //           })
    //           this.$emit('isRevokeVerifyFinanceCallBack')
    //         } else if (response.data === '200') {
    //           this.$message({
    //             showClose: true,
    //             message: '撤销送审成功',
    //             type: 'success',
    //             duration: 4000
    //           })
    //           this.$emit('isRevokeVerifyFinanceCallBack')
    //         }
    //         this.handleQuery()
    //       })
    //     })
    //     .catch(() => {
    //       this.$emit('isRevokeVerifyFinanceCallBack')
    //     })
    // },

    initBaseInfo() {
      getSex().then(response => {
        this.sexLists = Object.assign({}, response.data)
      })
      getAgencyBank().then(response => {
        this.agencyBankLists = Object.assign({}, response.data)
      })
       getConfigCtrlByTypeMof("fileVerify").then(response => {
        this.configCtrl = response.data
        
      })
    },
    query() {
      this.dialogStatus = '查询'
      this.dialogEditFormVisible = true
    },
    handleQuery() {
      this.listQuery.page = 1
      this.getList()
      this.dialogEditFormVisible = false
    },
    handleTree(data) {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.bankTips {
  padding-top: 5%;

  span:nth-child(1) {
    margin-left: 2%;
  }

  span:not(:nth-child(1)) {
    margin-left: 5%;
  }

  span {
    font-size: 16px;
    color: red;
  }
}
</style>
